<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- vue使用，不推荐在模板中来写过多的逻辑 -->
    <h3>{{ n1+n2 }}</h3>
    <!-- 对于一个计算结果，可能在当前的页面中，显示多个 -->
    <h3>{{ sum() }}</h3>
    <!-- <h3>{{ sum() }}</h3> -->
    <!-- <h3>{{ sum() }}</h3> -->
    <hr>
    <!-- 
      如果对于一个结果，进行计算，可以使用vue提供计算属性来完成，而且计算属性它还具有缓存功能
      如果你的依赖项，没有发生改变，则它会在再一次调用时，会读取缓存中的数据
    -->
    <div>{{total}}</div>
    <h3>{{msg}}</h3>
    <!-- <div>{{total}}</div> -->
    <!-- <div>{{total}}</div> -->
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        n1: 1,
        n2: 2,
        msg: ''
      },
      // 计算[属性]
      computed: {
        // 调用时，直接写名称就可以，不用写小括号
        // 计算属性中的依赖项，可以是一个，也是可以N个,取决于你在计算属性中调用多少
        // 注：此方法中不能写异步
        // 简写 使用最多的写法
        // total() {
        //   console.log('computed -- total')
        //   // 在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据
        //   return this.n1 + this.n2
        // }
        total: {
          // 简写只是实现的了get
          get() {
            return this.n1 + this.n2
          },
          set(newVal) {
            if (newVal > 10) {
              this.msg = '值有点的大'
            }
          }
        }
      },
      methods: {
        sum() {
          // console.log('sum --- methods', this.total);
          // 如果你定义的计算属性，为简写方式，则给计算属性赋值，会报错
          // 只有标准的写法时，它才可以对于计算属性进行赋值操作
          // 赋值只会触发标准方式中的set方法，然后你可以得到它，完成一些别的工作
          if (this.total > 6) {
            this.total = 101
          }
          return this.n1 + this.n2
        }
      }
    })
    // console.log(vm);
  </script>

</body>

</html>